<template>
	<view class="share w100 h100" v-if="show" @click="colse">
		<view class="c_box" @click.stop="colse" :style="{'margin-top': bottom == 'wedding' ? '10rpx' : '0','height': bottom == 'wedding' ? '880rpx' : '962rpx'}">
			<image class="w100" :src="posterImage" mode="widthFix"></image>
		</view>
		<!-- 此处有需要在调整，因为ui的意思就是这样，有问题找ui -->
		 <!-- :style="{'bottom': bottom == 'wedding' ? '124rpx' : '0rpx'}" -->
		<view class="bottom_tan w100" @click.stop="!colse" style="bottom: 0;">
			<view class="tan_header"></view>
			<view class="flex">
				<view class="weixin_btn" @click="weiXinShare">
					<view class="weixin_img_box">
						<image class="w100 h100" src="/static/weixin.png" mode=""></image>
					</view>
					<view class="weixin_txt s28 f500 family">
						分享好友
					</view>
				</view>
				<button class="weixin_btn_box" open-type="share"></button>
				<view class="weixin_btn" style="margin-left: 70upx; width: 140upx;" @click="downLoad">
					<view class="weixin_img_box">
						<image class="w100 h100" src="/static/penyouquan.png" mode=""></image>
					</view>
					<view class="weixin_txt s28 f500 family txtali">
						分享朋友圈
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "shareBox",
		props: {
			type: {
				type: Number,
				default: null
			},
			bottom: {
				type: String,
				default: ''
			},
			sku_id:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				show: false,
				posterImage: '',
				id: '',
				share_user_id: '77'
			}
		},
		onShareAppMessage() {},
		methods: {
			// 分享朋友圈获取海报
			getImage() {
				let that = this
				uni.showLoading({
					title: '加载中'
				});
				that.$request({
					url: 'common/poster',
					method: 'POST',
					data: {
						type: that.type,
						id: that.id,
						sku_id:that.sku_id
					}
				}).then(res => {
					if (res.statusCode == 200) {
						uni.hideLoading()
						that.posterImage = res.data.data.url
					}
				})
			},
			xianshi(id) {
				let that = this
				this.id = id
				that.show = true
			},
			colse() {
				this.posterImage=''
				this.show = false
			},
			// 下载海报保存到手机相册
			downLoad() {
				let that = this
				uni.showLoading({
					title: '加载中'
				});
				that.$request({
					url: 'common/poster',
					method: 'POST',
					data: {
						type: that.type,
						id: that.id,
						sku_id:that.sku_id
					}
				}).then(res => {
					if (res.statusCode == 200) {
						uni.hideLoading()
						that.posterImage = res.data.data.url
						uni.downloadFile({
							url: res.data.data.url,
							success: (res) => {
								if (res.statusCode === 200) {
									uni.showLoading({
										title: '下载中'
									});
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: function() {
											uni.showToast({
												title: '下载完成',
												icon: "success",
												duration: 2000
											})
										},
										fail: (error) => {
											uni.showToast({
												title: '您已拒绝了访问相册',
												icon: "none",
												duration: 2000
											})
										}
									})
								}
							},
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.share {
		position: fixed;
		top: 0;
		background: rgba(0, 0, 0, 0.5);
		overflow: hidden;
		z-index: 99999;

		.c_box {
			width: 498upx;
			padding: 24upx;
			margin: 0 auto;
			.header_box {
				height: 88upx;
				padding-left: 12upx;
				padding-right: 10upx;
				border-bottom: 2upx dashed #999999;

				.portrait_box {
					width: 64upx;
					height: 64upx;
					border-radius: 50%;
					margin-top: 12upx;
					margin-left: 20upx;

					.p_c_img {
						border-radius: 50%;
					}
				}

				.txt_box {
					margin-left: 16upx;
					margin-top: 14upx;

					.top_txt {
						color: #999999;
					}

					.bottom_box {
						color: #999999;
						margin-top: 8upx;
					}
				}

				.right_img {
					width: 110upx;
					height: 60upx;
					margin-top: 10rpx;
					margin-left: 30rpx;
				}
			}

			.content_box {
				.c_header_box {
					width: 454upx;
					padding-left: 22upx;
					padding-right: 22upx;
					margin-top: 28upx;

					.left_txt {
						.left_top_txt {
							width: 234upx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							color: #333333;
						}

						.left_bottom_txt {
							width: 234upx;
							font-size: 8upx;
							font-family: DIN-Regular, DIN;
							color: #999999;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin-top: 4upx;
						}
					}

					.con_dp_img {
						width: 37upx;
						height: 33upx;
						margin-top: 6upx;
						margin-left: 32upx;
					}

					.con_sc_img {
						width: 37upx;
						height: 33upx;
						margin-top: 6upx;
						margin-left: 20upx;
					}

					.guanzhu_box {
						width: 60rpx;
						height: 32rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: 2rpx solid #EB8787;
						color: #EB8787;
						line-height: 32rpx;
						margin-top: 6rpx;
						margin-left: 18rpx;
					}
				}

				.con_middle_box {
					margin-top: 20upx;
					margin-left: 22upx;

					.con_header_txt {
						color: #999999;
						text-decoration: line-through;
					}

					.zhuanxiang {
						margin-top: 14upx;

						.con_money_txt {
							color: #000000;
						}

						.con_money_num {
							color: #FF3F4A;
						}
					}
				}

				.goods_image {
					height: 380upx;
					border-radius: 16upx 16upx 16upx 16upx;
					margin-top: 20upx;
				}
			}

			.bottom_con {
				width: 454upx;
				padding-left: 22upx;
				padding-right: 22upx;
				margin-top: 20upx;
				padding-bottom: 20upx;

				.bottom_max_txt {
					width: 290upx;
					height: 70upx;
					color: #000000;
					overflow: hidden;
					display: -webkit-box;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.erwei_ma {
					width: 100upx;
					height: 100upx;
					margin-left: 60upx;

					.erma_image {
						width: 100upx;
						height: 100upx;
					}

					.txt_changan {
						font-size: 12upx;
						color: #241C1A;
					}
				}

				.hehuor_txt {
					color: #999999;
				}

				.three_txt {
					margin-top: 22upx;

					.fuwu_img {
						width: 16upx;
						height: 16upx;
						display: block;
						margin-left: 4rpx;
						margin-top: 6rpx;
					}

					.huan_txt {
						color: #666666;
						margin-left: 6upx;
					}
				}
			}
		}

		.bottom_tan {
			height: 360upx;
			background: #FFFFFF;
			border-radius: 48upx 48upx 0upx 0upx;
			position: fixed;

			.tan_header {
				width: 72upx;
				height: 8upx;
				background: #E8E8E8;
				border-radius: 6upx 6upx 6upx 6upx;
				margin: 32upx auto;
				margin-bottom: 0;
			}

			.weixin_btn {
				width: 112upx;
				margin-left: 46upx;
				margin-top: 66upx;

				.weixin_img_box {
					width: 88upx;
					height: 88upx;
					margin: 0 auto;
				}

				.weixin_txt {
					color: #333333;
					margin-top: 26upx;
				}
			}

			.weixin_btn_box {
				margin: 0;
				width: 120rpx;
				height: 150rpx;
				position: absolute;
				top: 102rpx;
				left: 37rpx;
				background: transparent;
			}

			button::after {
				border: none;
			}
		}
	}
</style>
